<style>
  .my-drop-zone { border: dotted 3px lightgray; }
  .nv-file-over { border: dotted 3px red; } /* Default class applied to drop zones on over */
  .another-file-over-class { border: dotted 3px green; }
  html, body { height: 100%; }
</style>

<div class="container p-0">

  <div class="navbar">
    <div class="navbar-header">
      <a class="navbar-brand" href>Angular2 File Upload</a>
    </div>
  </div>

  <div class="row">

    <div class="col-md-3">

      <h3>Select files</h3>

      <div ng2FileDrop
        [ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
        (fileOver)="fileOverBase($event)"
        [uploader]="uploader"
        class="well my-drop-zone p-2 mb-3">
        Base drop zone
      </div>

      <div ng2FileDrop
        [ngClass]="{'another-file-over-class': hasAnotherDropZoneOver}"
        (fileOver)="fileOverAnother($event)"
        [uploader]="uploader"
        class="well my-drop-zone p-2 mb-3">
        Another drop zone
      </div>

      Multiple<br>
      <input class="mt-2 mb-3" type="file" ng2FileSelect [uploader]="uploader" multiple  /><br/>

      Single<br>
      <input class="mt-2 mb-3" type="file" ng2FileSelect [uploader]="uploader" />
    </div>

    <div class="col-md-9" style="margin-bottom: 40px">

      <h3>Upload queue</h3>
      <p>Queue length: {{ uploader?.queue?.length ?  uploader?.queue?.length : 'Empty'}}</p>

      <table class="table">
        <thead>
          <tr>
            <th width="50%">Name</th>
            <th>Size</th>
            <th>Progress</th>
            <th>Status</th>
            <th>Actions</th>
          </tr>
        </thead>
        @if (uploader?.queue?.length) {
          <tbody>
            @for (item of uploader.queue; track item) {
              <tr>
                <td data-label="Name"><strong>{{ item?.file?.name }}</strong></td>
                @if (uploader.options.isHTML5) {
                  <td data-label="Size" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
                }
                @if (uploader.options.isHTML5) {
                  <td data-label="Progress">
                    <div class="progress" style="margin-bottom: 0;">
                      <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
                    </div>
                  </td>
                }
                <td data-label="Status" class="text-center">
                  @if (item.isSuccess) {
                    <span><i class="glyphicon glyphicon-ok"></i></span>
                  }
                  @if (item.isCancel) {
                    <span><i class="glyphicon glyphicon-ban-circle"></i></span>
                  }
                  @if (item.isError) {
                    <span><i class="glyphicon glyphicon-remove"></i></span>
                  }
                </td>
                <td data-label="Actions" nowrap>
                  <button type="button" class="btn btn-success btn-xs"
                    (click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess">
                    <span class="glyphicon glyphicon-upload"></span> Upload
                  </button>
                  <button type="button" class="btn btn-warning btn-xs"
                    (click)="item.cancel()" [disabled]="!item.isUploading">
                    <span class="glyphicon glyphicon-ban-circle"></span> Cancel
                  </button>
                  <button type="button" class="btn btn-danger btn-xs"
                    (click)="item.remove()">
                    <span class="glyphicon glyphicon-trash"></span> Remove
                  </button>
                </td>
              </tr>
            }
          </tbody>
        }
      </table>

      <div>
        <div>
          Queue progress:
          <div class="progress mt-2 mb-3" style="">
            <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
          </div>
        </div>
        <button type="button" class="btn btn-success btn-s me-2"
          (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
          <span class="glyphicon glyphicon-upload"></span> Upload all
        </button>
        <button type="button" class="btn btn-warning btn-s me-2"
          (click)="uploader.cancelAll()" [disabled]="!uploader.isUploading">
          <span class="glyphicon glyphicon-ban-circle"></span> Cancel all
        </button>
        <button type="button" class="btn btn-danger btn-s"
          (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
          <span class="glyphicon glyphicon-trash"></span> Remove all
        </button>
      </div>

    </div>

  </div>

  <br><br>

  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header">Response</div>
        <div class="card-body">
          {{ response }}
        </div>
      </div>
    </div>
  </div>
</div>
